<template>
<scroll-view :srcoll-y="true">

<view class="change">
  <view class="change-pro"> 
    <img 
    style="width:5.5em;height:5.5em;border-radius:50%;" 
    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fnimg.ws.126.net%2F%3Furl%3Dhttp%253A%252F%252Fdingyue.ws.126.net%252F2021%252F0926%252F47f59dc0j00r00u8i000sc000u000u0c.jpg%26thumbnail%3D650x2147483647%26quality%3D80%26type%3Djpg&refer=http%3A%2F%2Fnimg.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1658126433&t=b5dbc0efeca75405932bd51692e25546">
    <uni-icons class="camera" type="camera-filled" size="25"></uni-icons> 
  </view>

  <!-- 修改信息 -->
  <van-cell-group inset class="edit-info">
          <!-- 姓名 -->
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <view class="radio-box">
                <text>姓名</text>
                  <input style="text-align:right" v-model="name">
              </view>
            </template>
          </van-cell>
          <!-- 电话号码 -->
          <van-cell>
            <!-- 使用 title 插槽来自定义标题 -->
            <template #title>
              <view class="radio-box">
                <text>手机号</text>
                  <input style="text-align:right" v-model="telephone">
              </view>
            </template>
          </van-cell>
          <!-- 性别 -->
          <van-cell>
            <template #title>
              <view class="radio-box">
                <text>性别</text>
                <view>
                  <uni-data-checkbox 
                  selectedColor="#ff6781" 
                  v-model="valG" 
                  :localdata="gender" 
                  >
                  </uni-data-checkbox>
                </view>
              </view>
            </template>
          </van-cell>
          <!-- 婚否 -->
        <van-cell>
            <template #title>
              <view class="radio-box">
                <text>婚否</text>
                <view>
                  <uni-data-checkbox 
                  selectedColor="#ff6781" 
                  v-model="valM" 
                  :localdata="married" 
                  >
                  </uni-data-checkbox>
                </view>
              </view>
            </template>
          </van-cell>
          <!-- 出生日期 -->
          <van-cell>
            <template #title>
              <view class="birth">
                <text>出生日期</text>
                <view style="display:flex;flex-direction: row;">
                  <picker 
                  mode="date" 
                  :value="date" 
                  :start="startDate" 
                  :end="endDate" 
                  @change="bindDateChange">
                    <view>{{date}}</view>
                  </picker>
                  <van-icon name="arrow" />
                </view>
              </view>
            </template>
          </van-cell>
          <!-- 职业 -->
          <van-cell>
            <template #title>
              <view class="birth">
                <text>职业</text>
                <view style="display:flex;flex-direction:row">
                  <picker mode="multiSelector"
                   @change="bindMultiPicker" 
                   :value="inC" 
                   :range="arrC">
                      <view class="uni-input">{{job}}</view>
                  </picker>
                  <van-icon name="arrow" />
                </view>
              </view>
            </template>
          </van-cell>
          <van-field
            :value="age"
            label="年龄"
            input-align="right"
            disabled
          />
    </van-cell-group>

    <view style="width:50%;margin-top: 1em;">
      <van-button 
       @click="commitInfo"
        size="large" 
        round color="linear-gradient(to left top, #fff,#ff6781)">
        提 交
      </van-button>
    </view>


   </view>
  </scroll-view>
 </template>

<script>
export default {
  
   data() {
    const currentDate = this.getDate({
      format: true
    })
     return{
      valG: 0,
      valM:0,
      gender: [
        { value: 0, text: "男" },
        { value: 1, text: "女" },
      ],
      married: [
        { value: 0, text: "未婚" },
        { value: 1, text: "已婚" },
      ],
      index: 0,
      date: currentDate,
      name:'快诊小宝',
      telephone:'18178744263',
      show: true,
      arrC: [['学生','教师','工人','程序员'],
      ['建筑业','化工业','教育业','IT业']],
      inC: [0,2],
     } 
  },
  onShow(){
      //获取Storage里的个人信息
      let t = this; 
      uni.getStorage({key:'name',success:function(e){t.name=e.data}})
      uni.getStorage({key:'telephone',success:function(e){t.telephone=e.data}})
      uni.getStorage({key:'gender',success:function(e){t.valG=e.data}})
      uni.getStorage({key:'married',success:function(e){t.valM=e.data}})
      uni.getStorage({key:'birthday',success:function(e){t.date=e.data}})
      uni.getStorage({key:'job_index',success:function(e){t.inC=e.data}})
  },
  computed: {
    startDate() {
        return this.getDate('start');
    },
    endDate() {
        return this.getDate('end');
    },
    age() {
      let ageArray = this.getAge(this.date.split('-'))
      let age = ageArray[0] + '岁' + ageArray[1] + '个月' + ageArray[2] + '天'
      return age
    },
    job(){
      let job = this.arrC[0][this.inC[0]] + '/' + this.arrC[1][this.inC[1]]
      return job
    }
  },

  methods:{
      commitInfo(){
      console.log('提交成功，this.name为' + this.name)
      //将信息数据存入Storage
      uni.setStorage({key:'name',data:this.name,success:function(){}})
      uni.setStorage({key:'telephone',data:this.telephone,success:function(){}})
      uni.setStorage({key:'gender',data:this.valG,success:function(){}})
      uni.setStorage({key:'married',data:this.valM,success:function(){}})
      uni.setStorage({key:'birthday',data:this.date,success:function(){}})
      uni.setStorage({key:'job_index',data:this.inC,success:function(){}})
      uni.setStorage({key:'job',data:this.job,success:function(){}})
      uni.showToast({
          title: `提交成功`,
          icon: "success",
      });
      setTimeout(()=>{
        uni.switchTab({
          url:'/pages/person/person',
          success: function(res) {
          console.log(res)}
        })
      },1000)
    },
      bindPickerChange(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.index = e.detail.value
      },
      bindMultiPicker(e) {
          console.log('picker发送选择改变，携带值为', e.detail.value)
          this.inC = e.detail.value
      },
      change(e) {
        console.log("e:", e);
      },

      bindDateChange(e) {
        this.date = e.detail.value
      },
      getDate(type) {
          const date = new Date();
          let year = date.getFullYear();
          let month = date.getMonth() + 1;
          let day = date.getDate();

          if (type === 'start') {
              year = year - 120;
          } else if (type === 'end') {
              year = year;
          }
          month = month > 9 ? month : '0' + month;
          day = day > 9 ? day : '0' + day;
          return `${year}-${month}-${day}`;
      },
      //计算年龄函数
      getAge(birthday) {
          // 新建日期对象
          let date = new Date()
          // 今天日期，数组，同 birthday
          let today = [date.getFullYear(), date.getMonth() + 1, date.getDate()]
          // 分别计算年月日差值
          let age = today.map((value, index) => {
              return value - birthday[index]
          })
          // 当天数为负数时，月减 1，天数加上月总天数
          if (age[2] < 0) {
              // 简单获取上个月总天数的方法，不会错
              let lastMonth = new Date(today[0], today[1], 0)
              age[1]--
              age[2] += lastMonth.getDate()
          }
          // 当月数为负数时，年减 1，月数加上 12
          if (age[1] < 0) {
              age[0]--
              age[1] += 12
          }
          return age
      },
  }
}
</script>

<style scoped>
.birth {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.radio-box {
  display:flex;
  flex-direction: row;
  justify-content: space-between;
}
.edit-info {
  margin-top:1em;
}
.change-name-box {
  display: flex;
  justify-content: center;
  align-items: center;
}
.change-name {
  width: 50%;
  margin-left: 35%;

}

.change {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.change-pro {
    position: relative;
    /* margin-left:center; */
    margin-top:2rem;
    z-index: 0;
}
.camera {
  position: absolute;
  z-index: 1;
  margin-left: -1.8rem;
  margin-top:4rem;
}

</style>